<template>
   <div>
      <h2>app.vue 页面</h2>
      <n-button @click="fn1">基础语法获取数据 </n-button><br>

      <n-input v-model:value="inputValue"></n-input>
      <n-button @click="fn2">新增数据 </n-button><br>

      <n-button @click="fn3">删除一项 id=2</n-button> <br>

      <n-button @click="fn4">用instance发请求</n-button>

   </div>
</template>

<script>
import axios from 'axios';

// 创建一个axios 实例instance
/*  
创建出来的 instance 可以和axios一样使用
 好处：可以提前将通用配置项都写好， 后续调用时就可以省略一些配置
*/
// const instance = axios.create(config);

const instance = axios.create({
   // 可设置一些默认值，后续的请求 就不再需要 传递这些值了
   baseURL: 'http://localhost:3000'
});



// 请求拦截 与 响应拦截
//  可以用axios进行处理，也可以用instance处理 

// 1. 请求拦截 ： 可以在请求发送出去之前，对请求做一些额外的处理
// 语法： instance.interceptors.request.use(()=>{},()=>{}) (参数是两个回调函数： config，err)
instance.interceptors.request.use(
   /*
   * 只要经过 instance 的请求，都会先经过这里
   *   config  是请求配置对象
   *   返回值： config请求配置对象 （必须要return config） */

   (config) => {
      //   NOTE： 在这里，对config 做一些额外的处理; 比如添加一个请求头x-host
      //   后续，就在这里 添加一些操作; 其他地方写法是固定的

      console.log('请求拦截了：', config);
      config.headers['x-host'] = 'abcd';  // 添加一个请求头x-host 
      return config;
   },
   /*
   *  请求失败， 会进入的函数
   *   error 是请求失败的 错误信息
   */
   (error) => {
      return Promise.reject(error);  // 可看做是固定写法
   });
// 注意： 如果是用instance设置了请求拦截 和 响应拦截，此时如果用axios发送请求是不会经过instance里面的



// 2. 响应拦截：可以在响应到达之前，对响应 做一些额外的处理
instance.interceptors.response.use(
   (response) => {
      console.log('响应拦截了：',response);

      // return response; // 这里返回的内容，就是后续.then 中 函数的参数
      // 基于这点， 我们一般在这里 返回response.data ,后续就不需要再写 .data了
      return response.data;
   },
   (error) => {
      return Promise.reject(error);
   }
)


export default {
   data() {
      return {
         inputValue: ""
      }
   },

   methods: {
      fn1() {
         // 1. 基本语法 axios(config)
         // axios({
         //    url: 'http://localhost:3000/todos',  //请求地址
         //    method: "get"   // 请求方式
         // }).then((result) => {
         //    //！注意：这个result是一个Response包装对象，result里面的data 属性 才是真正的接口响应数据（即 获取到的数据）
         //    console.log(result.data); // data才是我们需要的
         // })

         // 2. axios(url,config)
         axios('http://localhost:3000/todos', {
            method: 'get'
         }).then((response) => console.log(response.data, 222222))
      },

      fn2() {
         // 调用接口，将输入框的值新增到后台（post请求可以添加数据）
         // 1.写法1  axios(url,config)
         // axios('http://localhost:3000/todos',{
         //    method:'post',
         //    data:{
         //       tiele:this.inputValue,
         //       complete:false
         //    }
         // }).then((response)=>{
         //    console.log(response.data,33333);
         // })

         // 2.写法2   axios.post(url,data,config)
         //    config 如果没有 可以不写
         axios.post('http://localhost:3000/todos', {
            title: this.inputValue,
            completed: false
         }).then((response) => {
            console.log(response.data, 44444);
         })
      },

      fn3() {
         // 1.axios(url,config) // 注意，在url后面拼接上要删除项的 id
         // axios('http://localhost:3000/todos/2',{
         //    method:'delete', 
         // }).then(response => console.log(response.data))

         // 2. axios.delete(url,config)
         axios.delete('http://localhost:3000/todos/1').then(response => console.log(response.data, 6666))

         // axios.delete(url,data,config)
         // axios.delete('http://localhost:3000/todos',{
         //    id:2
         // }).then((response)=>{
         //    console.log(response.data,5555);
         // })
      },
      fn4() {
         // 创建出来的 instance实例，使用语法和 使用axios一样
         //  请求 url地址，如没有以协议开头，那么会拼接上 instance 的baseURL ; 即最终的请求地址是http://localhost:3000/todos
         instance('/todos').then(response =>

            // console.log(response.data,77777))
            // 注意： 这里的 response 接收到的内容，就是响应拦截器 里面 return的response

            // 如果在 响应拦截器里，返回的是 response.data， 那么在这里 response收到的就是 data数据
            console.log(response,888888))

      }
   }
}
</script>